<!--
 @Description 网格布局子组件
 @author hemengxia
 @date 2022/10/20
-->

<template>
  <section class="v-grid-item-box" :style="{backgroundColor:getItemBgColor}">

    <template v-if="obj">
      <div :class="styleType" @click="toDetail(obj)">

        <van-image v-if="obj.imgId || obj.imgUrl" :src="setImgPath(obj.imgId, obj.imgUrl)" :fit="imgType">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="../../../apps/images/base/default-placeholder.png" alt="">
          </template>
        </van-image>
        <div v-else class="demo-box" :style="{backgroundColor:getItemBgColor}" />
        <p v-if="showTitle" class="grid-item-title etc">{{ obj.title }}</p>
        <p v-if="showSubTitle" class="grid-item-subtitle etc">{{ obj.subtitle }}</p>
      </div>
    </template>
  </section>
</template>
<script>
import mixins from './../mixins'

export default {
  name: 'VGridViewItem',
  mixins: [mixins],
  inject: ['isShowTitle', 'isShowSubtitle', 'imgShowType', 'itemBgColor'],
  props: {
    obj: {
      type: Object,
      default: {}
    },
    styleType: {
      type: String,
      default: 'style-one'
    }

  },

  data() {
    return {}
  },
  computed: {
    showTitle() {
      return this.isShowTitle()
    },
    showSubTitle() {
      return this.isShowSubtitle()
    },
    imgType() {
      return this.imgShowType()
    },
    getItemBgColor() {
      return this.itemBgColor()
    }

  },
  created() {
  }

}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.v-grid-item-box {
  border-radius: rem(16);

  > div {
    margin: 0 auto;
    position: relative;
    border-radius: rem(16);

    .demo-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #C9C9C9;
      border-radius: rem(16);
    }

    p {
      position: relative;
      margin: 0;
      text-align: left;
      color: #ffffff;
    }

    .grid-item-title {
      font-size: rem(30);
      font-weight: bold;
    }

    .grid-item-subtitle {
      margin-top: rem(19);
      opacity: 0.6;
      font-size: rem(26);
      font-weight: 400;
    }

    .van-image {
      border-radius: rem(16);
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

      .van-image__error,
      .van-image__loading {
        background-color: transparent;
      }

      img {
        border-radius: rem(16);
      }

      .van-image__img {
        border-radius: rem(16);
      }
    }

    &.style-one {
      width: rem(690);
      height: rem(250);
      padding: rem(60) rem(25) rem(10);

    }

    &.style-two {
      width: rem(342);
      height: rem(190);
      padding: rem(40) rem(25) rem(10);
    }

    &.style-three-left {
      width: rem(338);
      height: rem(400);
      padding: rem(40) rem(25) rem(10);
    }

    &.style-three-right {
      width: rem(345);
      height: rem(190);
      padding: rem(40) rem(25) rem(10);
    }

    &.style-four-left {
      width: rem(254);
      height: rem(362);
      padding: rem(40) rem(25) rem(10);

    }

    &.style-four-right-top {
      width: rem(432);
      height: rem(156);
      padding: rem(40) rem(25) rem(10);
    }

    &.style-four-right-bottom {
      width: rem(208);
      height: rem(190);
      padding: rem(30) rem(25) rem(10);
    }

    &.style-five-left {
      width: rem(246);
      height: rem(116);
      padding: rem(25) rem(20) rem(10);

      .grid-item-subtitle {
        margin-top: rem(10);
      }
    }

    &.style-five-right {
      width: rem(178);
      height: rem(250);
      padding: rem(25) rem(20) rem(10);

      .grid-item-subtitle {
        margin-top: rem(10);
      }
    }

    &.style-six {
      width: rem(220);
      height: rem(160);
      padding: rem(25) rem(20) rem(10);

      .grid-item-title {
        font-size: rem(28);
      }

      .grid-item-subtitle {
        margin-top: rem(10);
        font-size: rem(22);
      }

    }

    &.style-ten-right {
      width: rem(178);
      height: rem(250);
      padding: rem(25) rem(20) rem(10);

      .grid-item-subtitle {
        margin-top: rem(10);
      }
    }

    &.style-ten-left {
      width: rem(246);
      height: rem(116);
      padding: rem(25) rem(20) rem(10);

      .grid-item-subtitle {
        margin-top: rem(10);
      }
    }
  }
}
</style>
